<script setup="">
import { ref } from 'vue'
import { getcode, longinRegister, userLongin } from '@/api/index.js'
import { useRouter } from 'vue-router'

const head = ref(0)

const handlechange = () => { // 点击切换登录、注册
  head.value = !head.value
}
const Verification = ref({
  text: '获取验证码',
  tions: 10
})


const ruleFormRef = ref() // 获取表单实例
// input 表单验证规则
const rules = ({
   name: [
    { required: true, message: '您还没有输入手机号，请填写手机号', trigger: 'blur' },
    { min: 11, max: 11, message: '手机号长度必须是11位', trigger: 'blur' },
  ],
   password: [
    { required: true, message: '您还没有输入密码', trigger: 'blur' },
    { min: 4, max: 16, message: '密码长度必须是4~16', trigger: 'blur' },
  ],
   yanpassword: [
    { required: true, message: '您还没有输入验证码', trigger: 'blur' },
    { min: 4, max: 6, message: '验证码长度必须是4-6位', trigger: 'blur' },
  ],

})

const router = useRouter()
// 登录或者注册
const longin = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
      if (valid) {

        if (head.value === 0) {  // 判断是登录还是注册 0登录 其他注册
          const res = await userLongin(form.value.name,form.value.password)
          if (res.data.code === 10000) alert("登录成功") // 提示登录成功
          localStorage.setItem("user",JSON.stringify(res.data.data.userInfo))
          localStorage.setItem("pz_token",res.data.data.token)
          form.value.name = ""  // 清空输入框
          form.value.password = ""
          router.push("/")
        }else{
          const res = await longinRegister(form.value.name,form.value.password,form.value.yanpassword)
          if (res.data.code === 10000) alert("注册成功") // 提示注册成功
          head.value = 0   // head === 0 切换到登录
          form.value.name = ""  // 清空输入框
          form.value.password = ""
          form.value.yanpassword = ""
        }


      } else {
        console.log('error submit!', fields)
      }
    })
}


// 定义的表单input的数据名
const form = ref({
  name: '',
  password: '',
  yanpassword: ''
})



// 倒计时获取验证码
const isCounting = ref(false) // 定义倒计时状态 默认为false
const qiehuan = async () => { // 获取验证码方法
  const tiem = ref(null)
  if (isCounting.value){ // 判断倒计时状态如果为true 那就是倒计时中 禁止点击
    return
  }
  isCounting.value = true // 改变倒计时状态为true

   const res = await getcode(form.value.name) // 调用验证码api发送请求
   console.log(res)
    if (res.data.code === 10000){
      // ElMessage('发送成功')
      alert('发送成功')
    }

  tiem.value =  setInterval(async () => {
    Verification.value.tions--
    Verification.value.text = Verification.value.tions + 's'
    if (Verification.value.tions <= 0) {
      clearInterval(tiem.value)
      Verification.value.text = '重新发送'
      Verification.value.tions = 10
      isCounting.value = false // 改变倒计时状态为false 为倒计时结束准备让用户重新发送
      return
    }

  },1000)
}

</script>

<template>
  <el-row class="login-container" justify="center" :align="'middle'">
    <el-card style="max-width: 480px;">
      <template #header>
        <div class="card-header">
          <img src="/public/login-head.png" alt="">
        </div>
      </template>
      <div class="jump-link">
        <el-link type="primary" @click="handlechange()">
          <i class="el-icon-arrow-left"></i>
          {{ head ? "返回登录" : "注册账号" }}
          </el-link>
           <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto" style="margin-top: 10px;">
            <el-form-item label="手机号" prop="name">
              <el-input v-model="form.name" prefix-icon="Iphone" />
            </el-form-item>
             <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" />
            </el-form-item>
              <el-form-item label="验证码" v-if="head" prop="yanpassword">
              <el-input v-model="form.yanpassword">
                <template #append><p @click="qiehuan()">{{ Verification.text }}</p></template>
              </el-input>
            </el-form-item>
            <el-button type="primary" style="width: 100%;" @click="longin(ruleFormRef)">{{ head ? "注册" : "登录" }}</el-button>
           </el-form>
      </div>
    </el-card>

  </el-row>
</template>

<style lang='less' scoped>
:deep(.el-card__header) {
  padding: 0
}
  .login-container {
    height: 100%;
    .card-header{
      background-color: #899fe1;
      img {
        width: 430px;
      }
    }
    .jump-link {
      text-align: right;
      margin-bottom: 10px;
    }
  }
</style>
